<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <!-- <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>广告列表</h2>
        </template>
      </PageTitle> -->
      <el-tabs type="border-card">
        <el-tab-pane label="广告列表">
          <el-row :gutter="10" type="flex" justify="space-between">
            <el-col :span="10">
              <el-row :gutter="10" type="flex">
                <el-col :span="6">
                  <el-select placeholder="不限平台">
                    <el-option
                      v-for="item in examineStatus"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="model" placeholder="不限广告位">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select placeholder="不限显示状态">
                    <el-option
                      v-for="item in showStatus"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-select v-model="model" placeholder="不限到期时间">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="10">
              <el-row type="flex">
                <el-select placeholder="标题">
                  <el-option
                    v-for="item in titleOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <el-row type="flex">
                  <el-input placeholder="请输入搜索内容"></el-input>
                  <el-button type="primary">
                    <i class="el-icon-search"></i>
                  </el-button>
                </el-row>
              </el-row>
            </el-col>
          </el-row>
          <!-- 数据表 -->
          <el-table
            v-loading="downloadLoading"
            ooltip-effect="dark"
            :data="list"
            max-height="500px"
            style="margin-top: 20px"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" fixed />
            <el-table-column
              label="姓名"
              align="center"
              width="width"
              prop="id"
              fixed
            />
            <el-table-column
              label="标题"
              align="center"
              prop="full_name"
              fixed
            />
            <el-table-column
              label="视频预览"
              align="center"
              prop="phone"
              width="130"
              fixed
            />
            <el-table-column
              label="浏览量"
              align="center"
              prop="school"
              width="180"
            />
            <el-table-column
              label="文件大小"
              align="center"
              prop="qualification"
            >
            </el-table-column>
            <el-table-column
              label="审核状态"
              align="center"
              prop="practice_sum"
              width="120"
            />
            <el-table-column
              label="公开状态"
              align="center"
              prop="com_name"
              width="220"
            />
            <el-table-column
              label="发布日期"
              align="center"
              prop="com_name"
              width="220"
            />
            <el-table-column
              :label="$t('table.actions')"
              width="150"
              align="center"
              fixed="right"
            >
              <template slot-scope="{ row }">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  size="mini"
                  :disabled="!checkPermission('Intern-show')"
                  @click="addRole('edit', row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-row :gutter="10" style="margin-top: 20px">
            <el-col :span="8">
              <el-button type="primary" size="small">添加广告</el-button>
              <el-button type="danger" size="small">删除所选</el-button>
            </el-col>
            <el-col :span="16">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="255"
                style="text-align: right"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="广告位">
          <div class="tip">
            <p>系统内置广告位不能删除！</p>
            <p>自定义广告位调用名不可以以 “QS_”开头</p>
          </div>
          <el-table :data="list" style="width: 100%">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="id" label="ID" width="width">
            </el-table-column>
            <el-table-column label="广告位名称" width="width">
              <template slot-scope="scope">
                [{{ scope.row.platform }}]{{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column prop="prop" label="调用名称" width="width">
              <template slot-scope="scope">
                {{ scope.row.alias }}
              </template>
            </el-table-column>
            <el-table-column prop="prop" label="建议尺寸" width="width">
              <template slot-scope="scope">
                {{ scope.row.width }}*{{ scope.row.height }}
              </template>
            </el-table-column>
            <el-table-column prop="prop" label="广告数量" width="width">
              <template slot-scope="scope">
                {{ scope.row.ad_num }}
              </template>
            </el-table-column>
            <el-table-column prop="prop" label="类型" width="width">
              <template>
                <el-button type="info" plain disabled>信息按钮</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="prop" label="操作" width="width">
              <el-button type="primary" size="small">编辑</el-button>
              <el-button type="danger" size="small">删除</el-button>
            </el-table-column>
          </el-table>
          <el-row :gutter="10" style="margin-top: 20px">
            <el-col :span="8">
              <el-button type="primary" size="small">添加广告位</el-button>
              <el-button type="danger" size="small">删除所选</el-button>
            </el-col>
            <el-col :span="16">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="255"
                style="text-align: right"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          alias: "QS_shortvideo_jobing_top",
          name: "视频招聘页头部",
          width: 750,
          height: 250,
          ad_num: 3,
          is_sys: 1,
          platform: "触屏端",
        },
        {
          id: 2,
          alias: "QS_shortvideo_finding_top",
          name: "视频求职页头部",
          width: 750,
          height: 250,
          ad_num: 3,
          is_sys: 1,
          platform: "触屏端",
        },
      ],
      examineStatus: [
        { id: 1, name: "不限审核状态" },
        { id: 2, name: "未审核" },
        { id: 3, name: "已审核" },
        { id: 4, name: "未通过" },
      ],
      showStatus: [
        { id: 1, name: "不限显示状态" },
        { id: 2, name: "显示" },
        { id: 3, name: "隐藏" },
      ],
      titleOptions: [
        { id: 1, name: "标题" },
        { id: 2, name: "UID" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.tip {
  padding: 8px 16px;
  background-color: #fdf6ec;
  border-radius: 4px;
  border-left: 5px solid #f9c77c;
  margin: 0 0 20px;
  p {
    font-size: 14px;
    color: #e6a23c;
    line-height: 1em;
  }
}
</style>
